import React from 'react';

import './static/css/details.css';
import axios from 'axios';
import {Link,browserHistory} from 'react-router';

import Storage from './model/Storage.js';
import $ from 'jquery';

class Detail extends React.Component{
    constructor(props){
        super(props);
		this.state={
			list:"",
			msg1:"",
			msg2:"",
			msg3:"",
			is_collect:false,
			userid:"",
			productid:""
		};
		this.collect=this.collect.bind(this);

    }
	componentWillMount(){
		var _id=this.props.params._id;
		this.setState({
				productid:_id
			});

		if(JSON.parse(sessionStorage.getItem("user_info"))){  //判断是否登录，未登录则跳转到登录界面
			this.setState({
				userid:JSON.parse(sessionStorage.getItem("user_info"))._id
			});
		}
		else{
			alert("请先登录");
			browserHistory.push('Login');
		}

		var that=this;
		axios.get('http://127.0.0.1:2000/api/productcontent?id='+_id)
            .then(function (response) {
				that.setState({list:response.data.result[0]});
				that.setState({msg1:that.state.list.description.split("/")[0]});
				that.setState({msg2:that.state.list.description.split("/")[1]});
				that.setState({msg3:that.state.list.description.split("/")[2]});
            })
            .catch(function (error) {
                console.log(error);
            });
	}
	componentDidMount(){
			
		var subnav = document.getElementById('subnav');
				var list1 = document.getElementById('list')
				subnav.onclick = function(){
					
					if(list1.style.display == 'block'){
						
						list1.style.display = 'none';
						
					}else{
						
						list1.style.display = 'block'
					}
					
		}	

		 //页面加载时就判断当前商品是否被收藏，然后加载相应图标
          var collectlist=Storage.get("collectlist");
           this.setState({
                 is_collect:Storage.hasCollectData(this.state.userid,this.state.productid,collectlist)
            });
         
    }
    collect(){
    	
    	 //收藏的数据
              var newData={
                aid:this.state.userid,
                bid:this.state.productid,
                img:this.state.list.img,
                title:this.state.list.title,
                price:this.state.list.price,
                old_price:this.state.list.old_price
              }


              var collectlist=Storage.get("collectlist");
                 //1.获取localstorage的数据   判断有没有数据
                 if(collectlist){ //如果localStorage，再判断是否有当前的数据
                    if(Storage.hasCollectData(this.state.userid,this.state.productid,collectlist)){  
                        var list=Storage.deleteCollectData(this.state.userid,this.state.productid,collectlist); //存在则删除
                        Storage.set("collectlist",list);  //重新载入
                        this.setState({
                        	is_collect:false
                        })
                    }
                    else{   //不存在则收藏并写入localstorage中
                       this.setState({
                        	is_collect:true
                        });
                        collectlist.push(newData);
                        Storage.set("collectlist",collectlist);  //重新写入
                    }
                 }
                 else{  //还没有收藏过任何商品
                        var list=[];
                        list.push(newData);
                        Storage.set("collectlist",list);
                        this.setState({		//没有收藏过则为收藏
                        	is_collect:true
                        });   
                }
                console.log(Storage.get("collectlist"));
            
    }
    render(){
        return(
            <div>
               <div id='header2'>
			        <div className='back'>
				        <Link to="/Home">
					        <i className='iconfont'>&#xe640;</i>
				        </Link>	
			        </div>
			        <span className='title'>商品详情</span>
			        <div className='right'>
				        <a className="edit tubiao" onClick={this.collect}>
				        	{this.state.is_collect?<i className='iconfont'>&#xe603;</i>:<i className='iconfont'>&#xe656;</i>}
						    <span>收藏</span>
					    </a>
				        <a className='subnav tubiao' id='subnav'>
					        <i className='iconfont'>&#xe60e;</i>
					        <span>导航</span>
				        </a>
				
				        <ul className='navList1' id='list'>
          					<li>
                    			<Link to="/home">
                      				<i className='iconfont'>&#xe6ee;</i>首页
                    			</Link>
                  			</li>
                  			<li>
                    			<Link to="/mine">
                      				<i className='iconfont'>&#xe60f;</i>我的
                    			</Link>
                  			</li>
                  			<li>
                    			<Link to="/search">
                      				<i className='iconfont'>&#xe600;</i>搜索
                      			</Link>
                  			</li>
            			</ul>
			    </div>
		    </div>
		  
			   
			<div id="main">
			    <div className="content">
				    <div className="head">
					 <img src={`http://127.0.0.1:2000/${this.state.list.img}`} alt=""/>
					    <a className="point"></a>
					    <div className="seson"> 
						    <h1>{this.state.list.title}</h1>
						    <p>单人自助晚餐</p>
					    </div>
				    </div> 
				    <div className="buy">
					    <div className="money">
						    <strong>{this.state.list.price}</strong>
						    <span className="yuan">元</span>
						    <span className="price">门市价：{this.state.list.old_price}元</span>
					    </div>
					<div className="rightbuy"><Link to={{pathname:"/OrderCommit/"+this.state.list._id}}>立即购买</Link></div>
				</div> 
				<div className="group">
					<ul>
						<li>
							<img  />
							<span>{this.state.msg1}</span>
						</li>
						<li>
							<img  />
							<span>{this.state.msg2}</span>
						</li>
						<li>
							<img  />
							<span>{this.state.msg3}</span>
						</li>
					</ul>
				</div>
				<div className="star">
				    <span className="left">
						<i className="iconfont icon-shoucang"></i>
						<i className="iconfont icon-shoucang"></i>
						<i className="iconfont icon-shoucang"></i>
						<i className="iconfont icon-shoucang"></i>
						<i clahss="iconfont icon-shoucang"></i>   
						<h>4.6</h>
					</span>
					<span className="right">423人评价></span>
				</div> 
				<div className="pingjia">
					<a href="#">环境优雅65</a>
					<a href="#">服务热情50</a>
					<a href="#">味道赞42</a>
					<a href="#">菜品丰富37</a>
					<a href="#">回头客35</a>
					<a href="#">干净卫生33</a>
					<a href="#">价格实惠29</a>
					<a href="#">肉类号25</a>
					<a href="#">分量足7</a>
					<a href="#">不推荐11</a> 
				</div>
				<div className="infor">商家信息</div> 
				<div className="adress">
					<div className="left">
						<h5>四海一家(益田假日广场店)</h5>
						<div>南山区深南大道9028号华侨城威尼斯酒店...</div>
						<span></span><span>离我最近</span>
					</div>
					<div className="right">
						电话
					</div>
				</div>
			</div>
		</div>
			
    </div>
        )
    }
        
}

export default Detail;